<template>
	<el-popover trigger="hover" title="" width="660">
		<div class="flex-between-center margin-bottom-4">
			<span>机台任务</span>
			<div class="flex-end-center">
				<div class="item-gap"><el-button size="mini">待翻改: {{ machineTaskList.filter(x => x.openingState === 1).length }}</el-button></div>
				<el-button class="item-gap" size="mini">待开台: {{ machineTaskList.filter(x => x.openingState === 2).length }}</el-button>
				<div><el-button size="mini">待了机: {{ machineTaskList.filter(x => x.openingState === 3).length }}</el-button></div>
			</div>
		</div>
		<jk-table :data="machineTaskList" size="mini" :height="240">
			<vxe-column title="机台名称" align="left" field="machineName" :width="90"></vxe-column>
			<vxe-column title="状态" align="center" field="openingState" :width="80">
				<template slot-scope="scope">
					<jk-state-bar :state="scope.row.openingState" :state-list="openStateList"></jk-state-bar>
				</template>
			</vxe-column>
			<vxe-column title="要求翻改日期" align="left" field="changeDate" :min-width="120"></vxe-column>
			<vxe-column title="计划开台日期" align="left" field="subPlanStartDate" :min-width="120"></vxe-column>
			<vxe-column title="计划了机日期" align="left" field="subPlanEndDate" :min-width="120"></vxe-column>
			<vxe-column width="100" align="center" field="version" title="操作">
				<template slot-scope="scope">
					<div class="flex-center">
						<jk-button
							v-show="scope.row.openingState === 1"
							:disabled="!getPermission([`${renovatePermissionPrefix}:renovation`])"
							class="item-gap"
							size="mini"
							type="text"
							@click="finishRenovate(scope.row.id)"
						>
							<span
								:style="{
									'text-decoration': getPermission([`${renovatePermissionPrefix}:renovation`]) ? '' : 'line-through'
								}"
							>完成翻改</span>
						</jk-button>
						<jk-button v-show="scope.row.openingState === 2" :disabled="!getPermission([`${openPermissionPrefix}:update`])" class="item-gap" size="mini" type="text" @click="onOpenBtn(scope.row)">开台</jk-button>
						<jk-button v-show="scope.row.openingState === 3" :disabled="!getPermission([`${closePermissionPrefix}:update`])" class="item-gap" size="mini" type="text" @click="onCloseBtn(scope.row)">了机</jk-button>
					</div>
				</template>
			</vxe-column>
		</jk-table>
		<div slot="reference">
			<el-button size="mini" icon="el-icon-s-flag" class="item-gap">
				<span>总机台：</span>
				<span style="font-weight: 700; font-size: 13px;">{{ detailDataMachineList.length }}</span>
				<span> 台，</span>
				<span>下达：</span>
				<span style="font-weight: 700; font-size: 13px;">{{ renovateMachineList.length || 0 }} 台</span>
				<span>，已开：</span>
				<span style="font-weight: 700; font-size: 13px;">{{ formData.prdNoticeMachineList ? formData.prdNoticeMachineList.filter(x => x.openingState === 3).length : 0 }} 台</span>
			</el-button>
		</div>
	</el-popover>
</template>
<script>
    import permissionMixin from '../../../../mixins/permission-mixin';
    import { openStateList } from '../../../../utils/jk/status-option-list';

    export default {
        mixins: [permissionMixin],
        components: {
        },
        props: {
            machineTaskList: {
                type: Array,
                default() {
                    return [];
                }
            },
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            renovatePermissionPrefix: { // 翻改任务的权限
                type: String,
                default: ''
            },
            openPermissionPrefix: { // 开台任务页的权限
                type: String,
                default: ''
            },
            closePermissionPrefix: { // 了机任务页的权限
                type: String,
                default: ''
            }
        },
        data() {
            return {
                openStateList: openStateList,
                detailDataMachineList: [],
                renovateMachineList: []
            };
        },
        methods: {
            onOpenBtn(e) {
                this.$emit('on-open', e);
            },
            onCloseBtn(e) {
                this.$emit('on-close', e);
            },
            finishRenovate(e) {
                this.$emit('on-renovate', e);
            }
        },
        watch: {
            formData: {
                handler(newVal) {
                    this.renovateMachineList = newVal.prdNoticeMachineList ? newVal.prdNoticeMachineList.filter(x => {
                        return x.openingState > 0;
                    }) : [];
                    this.detailDataMachineList = newVal ? newVal.prdNoticeMachineList : [];
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
